import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { getSession } from 'reducers/authentication';
import { setLocale } from 'reducers/locale';
import counterpart from 'counterpart';
import { locales } from 'config/translation';

import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

import 'bootstrap/less/bootstrap.less';

import 'bscomponent/styles/custom-styles.css';

import HeaderNavigation from 'bscomponent/HeaderNavigation';
import Body from 'bscomponent/Body';
import Footer from 'bscomponent/Footer';
import SideMenu from 'bscomponent/SideMenu';

//import 'stylus/main.styl';

var LocaleSwitcher = ({currentLocale, onLocaleChange}) => (
  <select value={currentLocale} onChange={e => onLocaleChange(e.target.value)}>
    {locales.map(lang => <option key={lang} value={lang}>{lang}</option>)}
  </select>
);

export class App extends Component {

  constructor(args) {
    super(args);
    this.state = {
      toggled: false
    };
    this.toggleMenu = this.toggleMenu.bind(this);
  }
  componentDidMount() {
    this.props.getSession();
  }

  toggleMenu() {
    console.log(this.state.toggled);
    this.setState({toggled: !this.state.toggled});
  }

  render() {
    const {currentLocale, setLocale} = this.props;
    const menuItems = [
      {label: 'Home', link: '/'}, {label: 'Employees', link: '/employees'},
      {label: 'Private page', link: '/private'}, {label: 'Upload', link: '/upload'},
      this.props.isAuthenticated ? {label: 'Logout', link: '/logout'} : {label: 'Login', link: '/login'}
    ];

    const sideMenuItems = [
      {label: 'Overview', link: '#', glyphicon: 'home'},
      {label: 'Audience', link: '#', glyphicon: 'user'},
      {label: 'Finances', link: '#', glyphicon: 'usd', subMenus: [
        {label: 'Incomes', link: '#'},
        {label: 'Outcomes', link: '#'}
      ]},
      {label: 'Real time', link: '#', glyphicon: 'time'},
      {label: 'Projects', link: '#', glyphicon: 'briefcase', subMenus: [
        {label: 'Free ration nation', link: '#'},
        {label: 'Cats going crazy', link: '#'}
      ]},
    ];

    return (
      <div>
        <HeaderNavigation items={menuItems}/>

        <div id="wrapper" className={this.state.toggled? 'toggled': ''}>

          <SideMenu items={sideMenuItems} />

          <div id="page-content-wrapper">
            {this.props.children}
          </div>

        </div>
      </div>
    );

  }
}

export default connect(
  state => ({isAuthenticated: state.authentication.isAuthenticated, currentLocale: state.locale.currentLocale}),
  {getSession, setLocale}
)(App);
